<template>
    <div class="coupon-adapt">
        <h4>{{$t('coupon.adapt.txt1')}}</h4>
        <coupon-item :coupon="adaptObj" :selectable="false"></coupon-item>
        <el-row :gutter="20" style="margin-top: 30px; margin-bottom:20px;" v-for="arr in listShow">
            <el-col :span="6" v-for="item in arr">
                <product-item :data="item"></product-item>
            </el-col>
        </el-row>
        <div class="pagination-container">
            <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="listQuery.page" :page-size="listQuery.size" layout="total, prev, pager, next, jumper" :total="total">
            </el-pagination>
        </div>
    </div>
</template>

<script>
    import couponItem from './component/couponItem.vue';
    import productItem from '../product/component/productItem.vue';
    import { getCouponDetail, fetchMyPrdList } from '@/api/c';
    function split_array(arr, len){    var a_len = arr.length;    var result = [];    for(var i=0;i<a_len;i+=len){        result.push(arr.slice(i,i+len));    }    return result;}

    export default {
        components: { couponItem, productItem },
        name: 'couponAdapt',
        data() {
        return {
            id: this.$route.params.id,
            activeName: 'active',
            adaptObj: {},
            list: [],
            listShow: [],
            total: null,
            listQuery: {
                couponId: this.$route.params.id,
                page: 1,
                size: 20
              }
        }
    },
    methods: {
        getList() {
          getCouponDetail({
            id: this.id
          }).then(response => {
              this.adaptObj = response.data || {}
          })
          fetchMyPrdList(this.listQuery).then(response => {
              this.list = response.data ? response.data.list : []
              this.total = response.data ? response.data.total : 0
          })
        },
        handleSizeChange(val) {
            this.listQuery.size = val
            this.getList()
        },
        handleCurrentChange(val) {
            this.listQuery.page = val
            this.getList()
        }
    },
    watch: {
        list: function(val) {
          this.listShow = split_array(val, 4);
        }
    },
    created() {
        this.getList()
    }
    }
</script>

<style  scoped>
    p {
        margin: 0;
    }
    li {
        list-style: none;
    }

    .coupon-adapt {
        width: 1050px;
        margin: 0 auto;
        padding: 48px 0;
        color: #333333;
    }
    .coupon-adapt .item {
        display: block;
        margin: 12px;
    }
    .coupon-adapt .coupon-item{
        margin-bottom: 15px;
    }
    h4 {
      font-size: 18px;
        margin-bottom: 21px;
    }
    .coupon-item {
        border: 1px solid #FFB73E;
        padding: 20px;
        border-radius: 6px;
        display: inline-block;
        background: #ffffff;
    }
</style>
<style type="text/css">

</style>
